<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入依赖库-->
    <th:block th:replace="componet::reference">
    </th:block>
</head>
<body>
<div>
    <div class="layui-row">
        <div style="text-align: center;">
            <div class="layui-inline">
                <form class="layui-form layui-form-pane" lay-filter="myForm" th:object="${session.user}">
                    <div class="layui-form-item">
                        <label for="usercode" class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="usercode" name="userCode" disabled="" th:value="*{userCode}"
                                   class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">用户名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="username" name="userName" disabled="" th:value="*{userName}"
                                   class="layui-input"></div>

                    </div>
                    <div class="layui-form-item">
                        <label for="oldpass" class="layui-form-label">
                            旧密码</label>
                        <div class="layui-input-inline">
                            <input type="password" id="oldpass" name="userPassword" required="" lay-verify="required"
                                   autocomplete="off" class="layui-input"></div>
                        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>您本次登录时的密码</div>
                    </div>
                    <div class="layui-form-item">
                        <label for="password" class="layui-form-label">
                            新密码</label>
                        <div class="layui-input-inline">
                            <input type="password" id="password" name="password" required="" lay-verify="required|pass"
                                   autocomplete="off" class="layui-input"></div>
                        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>新密码不少于6个字符</div>
                    </div>
                    <div class="layui-form-item">
                        <label for="repassword" class="layui-form-label">
                            确认密码</label>
                        <div class="layui-input-inline">
                            <input type="password" id="repassword" name="repassword" required=""
                                   lay-verify="required|repass"
                                   autocomplete="off" class="layui-input"></div>
                        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>确认密码必须和新密码一致</div>
                    </div>

                    <div class="layui-form-item">
                        <label for="repassword" class="layui-form-label">
                            性别</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="sex" value="男" title="男" class="layui-input">
                            <div class="layui-unselect layui-form-radio layui-form-radioed"><i
                                    class="layui-anim layui-icon">□</i>
                                <div>男</div>
                            </div>
                            <input type="radio" name="sex" value="女" title="女" class="layui-input">
                            <div class="layui-unselect layui-form-radio layui-form-radioed"><i
                                    class="layui-anim layui-icon">□</i>
                                <div>女</div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="age" class="layui-form-label">
                            年龄</label>
                        <div class="layui-input-inline">
                            <input type="text" id="age" name="age" required="" lay-verify="required"
                                   autocomplete="off" class="layui-input" th:value="*{age}"></div>
                    </div>

                    <div class="layui-form-item">
                        <label for="entryDate" class="layui-form-label">
                            入职日期</label>
                        <div class="layui-input-inline">
                            <input type="text" id="entryDate" name="entryDate" required="" lay-verify="required"
                                   autocomplete="off" class="layui-input"
                                   th:value="*{#dates.format(entryDate,'yyyy-MM-dd')}" disabled></div>
                    </div>

                    <div class="layui-form-item">
                        <label for="dimissionDate" class="layui-form-label">
                            离职日期</label>
                        <div class="layui-input-inline">
                            <input type="text" id="dimissionDate" name="dimissionDate" required="" lay-verify="required"
                                   autocomplete="off" class="layui-input"
                                   th:value="*{#dates.format(dimissionDate,'yyyy-MM-dd')}" disabled></div>
                    </div>


                    <div class="layui-form-item">
                        <label for="phoneTel" class="layui-form-label">
                            联系电话</label>
                        <div class="layui-input-inline">
                            <input type="text" id="phoneTel" name="phoneTel" required="" lay-verify="required|phone"
                                   autocomplete="off" class="layui-input" th:value="*{phoneTel}"></div>
                    </div>


                    <div class="layui-form-item">
                        <label for="email" class="layui-form-label">
                            电子邮箱</label>
                        <div class="layui-input-inline">
                            <input type="email" id="email" name="email" required="" lay-verify="required|email"
                                   autocomplete="off" class="layui-input" th:value="*{email}"></div>
                    </div>


                    <div class="layui-form-item">
                        <button class="layui-btn" lay-filter="save" lay-submit="">保存修改</button>
                    </div>
                </form>

            </div>
        </div>

    </div>
</div>

<script>
    layui.use(['form', 'layer'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            form.val("myForm", {
                "sex": "[[${session.user.sex}]]"
            });

            form.verify({
                pass: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (value.length < 6) {
                        return "新密码不少于6个字符";
                    }
                    if (value != $("input[name='repassword']").val()) {
                        return "两次密码输入不一致";
                    }

                }

                // 我们既支持上述函数式的方式，也支持下述数组的形式
                // 数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                , repass: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (value.length < 6) {
                        return "确认密码不少于6个字符";
                    }
                    if (value != $("input[name='password']").val()) {
                        return "两次密码输入不一致";
                    }
                }
            });


            //监听提交
            form.on('submit(save)',
                function (data) {

                    //发异步，把数据提交给java
                    $.post("/user/userUpdate", data.field, function (data) {
                        if (data == "success") {
                            layer.alert("修改成功", {
                                    icon: 1
                                },
                                function () {
                                    // 获得frame索引
                                    var index = parent.layer.getFrameIndex(window.name);
                                    // 关闭当前frame
                                    parent.layer.close(index);

                                    xadmin.close();
                                });
                        } else {
                            layer.msg(data, {icon: 2});
                        }
                    });

                    return false;
                });

        });
</script>

</body>
</html>